import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
} from 'antd';
import request from '@/utils/request';
import  moment from 'moment'
import  Chart from './Chart'
import L from 'leaflet';   //引入leaflet
import './index.less';
import './../Home/leaflet.less';
import P1 from './../../images/p1.png';
import BuildModalTitle from '@/components/BuildModalTitle';
import {  afterCloseModal } from '@/utils/utils';
import debounce from 'lodash/debounce';
import ValveData4 from './../ValveFlowMeterSIte/ValveData4';
import ValveData14 from './../ValveFlowMeterSIte/ValveData14';

@connect(({ waterworks, loading }) => ({
  waterworks,
  loading: loading.models.waterworks,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
      data: {
        item1: (Math.random() * 10).toFixed(2),
        item2: (Math.random() * 10).toFixed(2),
        item3: (Math.random() * 10).toFixed(2),
        item4: (Math.random() * 10).toFixed(2),
        item5: (Math.random() * 10).toFixed(2),
        item6: (Math.random() * 10).toFixed(2),
        item7: (Math.random() * 10).toFixed(2),
        item8: (Math.random() * 10).toFixed(2),
        item9: (Math.random() * 10).toFixed(2),
        item10: (Math.random() * 10).toFixed(2),
      },
      modalTitle: '',
      unit: '',
      editRecord: [],
      QQHData: [],
      QQHAllData: {},
      YYCData1: [],
      YYCAllData1: {},
      YYCData2: [],
      YYCAllData2: {},
      TELData1: [],
      TELAllData1: {},
      TELData2: [],
      TELAllData2: {},
      TELData3: [],
      TELAllData3: {},
      LCQData1: [],
      LCQAllData1: {},
      LCQData2: [],
      LCQAllData2: {},
      LCQData3: [],
      LCQAllData3: {},
      SFQData1: [],
      SFQAllData1: {},
      SFQData2: [],
      SFQAllData2: {},
    };
  }

  componentDidMount() {

   const that=this;
    const { dispatch } = this.props;
    const {
      waterworks: { pageLoaded, scrollData },
    } = this.props;

    if (pageLoaded) {
      this.renderMap();

    } else {
      that.renderMap();
      // dispatch({
      //   type: 'waterworks/fetch',
      //   callback: () => {
      //     const { dispatch } = this.props;
      //     dispatch({
      //       type: 'waterworks/changeLoaded',
      //     });
      //     that.renderMap();
      //   },
      // });

    }
   this.timer=setInterval(function() {
     console.log('set')
     // dispatch({
     //   type: 'waterworks/fetch',
     // });
     that.fetchQQH();
     that.fetchYYC();
     that.fetchTEL();
     that.fetchLCQ();
     that.fetchSFQ();
     that.setState({
       time: moment().format('YYYY-MM-DD HH:mm:ss'),
     })
   },10000)
    this.fetchQQH();
    this.fetchYYC();
    this.fetchTEL();
    this.fetchLCQ();
    this.fetchSFQ();

    setTimeout(function (){
      document.querySelector('.leaflet-control-attribution').style.display='none'
    },1000)
  }
  fetchQQH = (params) => {
    const that = this;
    request(`/workstations/246692813440962560`, {
      method: 'GET',
    }).then(response => {
      console.log('fetchQQH ,data',response)
      if (response.status === 200) {
        that.setState({
          QQHData:response.data.data.workstation_data.modbus,
          QQHAllData:response.data.data
        });
      }
    });
  };
  fetchYYC = (params) => {
    const that = this;
    request(`/workstations/393065209482874880`, {
      method: 'GET',
    }).then(response => {
      console.log('fetchYYC ,data',response)
      if (response.status === 200) {
        that.setState({
          YYCData1:response.data.data.workstation_data.sensor,
          YYCData2:response.data.data.workstation_data.modbus,
          YYCAllData1:response.data.data
        });
      }
    });
  };
  fetchTEL = (params) => {
    const that = this;
    request(`/workstations/393143306949398528`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          TELData1:response.data.data.workstation_data.modbus,
          TELAllData1:response.data.data
        });
      }
    });
    request(`/workstations/409309775110270976`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          TELData2:response.data.data.workstation_data.modbus,
          TELAllData2:response.data.data
        });
      }
    });
    request(`/workstations/242390878948638720`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          TELData3:response.data.data.workstation_data.modbus,
          TELAllData3:response.data.data
        });
      }
    });
  };
  fetchLCQ = (params) => {
    const that = this;
    request(`/workstations/400243805674229760`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          LCQData1:response.data.data.workstation_data.sensor,
          LCQAllData1:response.data.data
        });
      }
    });
    request(`/workstations/390960445336592384`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          LCQData2:response.data.data.workstation_data.sensor,
          LCQAllData2:response.data.data
        });
      }
    });
    request(`/workstations/400600056530714624`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          LCQData3:response.data.data.workstation_data.modbus,
          LCQAllData3:response.data.data
        });
      }
    });
  };
  fetchSFQ = (params) => {
    const that = this;
    request(`/workstations/391551926178983936`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          SFQData1:response.data.data.workstation_data.modbus,
          SFQAllData1:response.data.data
        });
      }
    });
    request(`/workstations/388445435469152256`, {
      method: 'GET',
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          SFQData2:response.data.data.workstation_data.sensor,
          SFQAllData2:response.data.data
        });
      }
    });
  };
  componentWillUnmount() {
    console.log('componentWillUnmount');
    if( this.timer){
      clearInterval( this.timer)
    }

  }
  renderMap=()=>{
    var map = this.map=L.map('leaftMapDiv', {
      crs: L.CRS.Simple,
      minZoom: -1,
      zoom: 1,
      maxZoom:1,
      zoomSnap: 0.25,
    });
    var bounds = [[0, 0], [950, 1689]];
    var image = L.imageOverlay(P1, bounds).addTo(map);
    map.fitBounds(bounds);

    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgElement.setAttribute('viewBox', '52 44 1573 976');
    svgElement.innerHTML = `
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M350 805L660 805" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
     <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M1030 800L1200 800" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M1040 350L1130 350" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M760 350L860 350" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    `;
    L.svgOverlay(svgElement, bounds).addTo(map);

    map.on('click', function(e) {
      console.log(e.latlng.toString());
      return false;
    });
    map.flyTo([542.2784442, 882.391679])
    map.on('zoomend', function(e) {
      console.log(map.getZoom());
    });
    this.renderPopup()
  }
  renderPopup=()=>{
    var myIcon = L.divIcon({ className: 'my-div-icon' });
    const html1 = document.querySelector('#pop1');
    const html2 = document.querySelector('#pop2');
    const html3 = document.querySelector('#pop3');
    const html4 = document.querySelector('#pop4');
    const html5 = document.querySelector('#pop5');
    const oMarker2 = L.marker([750, 480], { icon: myIcon }).addTo(this.map);
    oMarker2.bindPopup(html1, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();

    const oMarker3 = L.marker([750, 950], { icon: myIcon }).addTo(this.map);
    oMarker3.bindPopup(html2, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();

    const oMarker6 = L.marker([750, 1400], { icon: myIcon }).addTo(this.map);
    oMarker6.bindPopup(html5, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();

    const oMarker4 = L.marker([150, 90], { icon: myIcon }).addTo(this.map);
    oMarker4.bindPopup(html3, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();

    const oMarker5 = L.marker([150, 1330], { icon: myIcon }).addTo(this.map);
    oMarker5.bindPopup(html4, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();
  }
  showModal=(title,editRecord)=>{
    this.setState({
      modalTitle:title,
      editRecord:editRecord,
      editModal:true,
    })
  }
  render() {
    const {
      waterworks: { data},
    } = this.props;
    console.log('QQHData',this.state.QQHData)
    console.log('YYCData1',this.state.YYCData1)
    return <div style={{height:'100%',position:'relative'}}>
      <div className={'leaflet-time'}>
        数据采集时间 <span>{this.state.time}</span>
      </div>
      <div  id={'pop1'} className={'pop-container'}>
        <div   className="pop-title">园艺场沉砂池</div>
        <div   className="pop-content">
          <div className="item">
            <li>液位(m)</li>
            <li>浊度(NTU)</li>
          </div>
          <div className="item2">
            <li>{this.state.YYCData1[0]?this.state.YYCData1[0].parameters.value:''}</li>
            <li>{this.state.YYCData2[0]?this.state.YYCData2[0].parameters.measure_value3:''}</li>
          </div>
        </div>
      {/*   <p className={'show-detail'}  onClick={()=>{
          this.setState({
            dataModal2:true
          })
        }}>查看详情</p> */}
      </div>
      <div  className={'pop-container'} id={'pop2'}>
        <div   className="pop-title">塔尔郎水厂</div>
        <div className="pop-content" >
          <div className="item">
            <li>进水流量(m³/h)</li>
            <li>出水流量(m³/h)</li>
            <li>取水口浊度(NTU)</li>
          </div>
          <div className="item2">
            <li>{this.state.TELData1[0]?this.state.TELData1[0].parameters.instantaneous_flow:''}</li>
            <li>{this.state.TELData2[0]?this.state.TELData2[0].parameters.instantaneous_flow:''}</li>
            <li>{this.state.TELData3[0]?this.state.TELData3[0].parameters.measure_value2:''}</li>
          </div>
        </div>
   {/*      <p className={'show-detail'} onClick={()=>{
          this.showModal('塔尔郎水厂历史数据',['item3','item4','item5'])
        }}>查看详情</p> */}
      </div>
      <div className="pop-container"  id={'pop3'}>
        <div   className="pop-title">老城区水厂</div>
        <div className="pop-content">
          <div className="item">
            <li>出水流量(m³/h)</li>
            <li>1#液位(m)</li>
            <li>2#液位(m)</li>

          </div>
          <div className="item2">
            <li>{this.state.LCQData3[0]?this.state.LCQData3[0].parameters.instantaneous_flow:''}</li>
            <li>{this.state.LCQData1[1]?this.state.LCQData1[1].parameters.value:''}</li>
            <li>{this.state.LCQData2[0]?this.state.LCQData2[0].parameters.value:''}</li>
          </div>
        </div>
        {/* <p className={'show-detail'}  onClick={()=>{
          this.showModal('老城区水厂历史数据',['item6','item7','item8'])
        }}>查看详情</p> */}
      </div>
      <div className="pop-container"  id={'pop4'}>
        <div   className="pop-title">示范区水厂</div>
        <div className="pop-content" >
          <div className="item">
            <li>出水流量(m³/h)</li>
            <li>液位(m)</li>
          </div>
          <div className="item2">
            <li>{this.state.SFQData1[0]?this.state.SFQData1[0].parameters.instantaneous_flow:''}</li>
            <li>{this.state.SFQData2[0]?this.state.SFQData2[0].parameters.value:''}</li>
          </div>
        </div>
        {/* <p className={'show-detail'}  onClick={()=>{
          this.showModal('示范区水厂历史数据',['item9','item10'])
        }}>查看详情</p> */}
      </div>
      <div className="pop-container"  id={'pop5'}>
        <div   className="pop-title">七泉湖水厂</div>
        <div className="pop-content" >
          <div className="item">
            <li>进水流量(m³/h)</li>
            <li>出水流量(m³/h)</li>
          </div>
          <div className="item2">
            <li>{this.state.QQHData.length>0?this.state.QQHData[0].parameters.instantaneous_flow:''}</li>
            <li>{this.state.QQHData.length>0?this.state.QQHData[1].parameters.instantaneous_flow:''}</li>
          </div>
        </div>
      {/*   <p className={'show-detail'}  onClick={()=>{
          this.setState({
            dataModal:true
          })
        }}>查看详情</p> */}
      </div>

      <div id={'leaftMapDiv'} style={{
        display: 'flex',
        fontSize: '30px',
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      </div>
      <Modal
        title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                title={this.state.modalTitle}/>}
        destroyOnClose
        visible={this.state.editModal}
        width={1000}
        centered
        onOk={() => {
          this.setState({ editModal: false, editRecord: [] });
        }}
        className="editModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ editModal: false, editRecord: [] });
        }}

      >
        <Chart editRecord={this.state.editRecord} modalTitle={this.state.modalTitle}></Chart>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.dataModal} modalClass="dataModal"
                                title={`${this.state.QQHAllData.name} 数据`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            dataModal: false,
            editRecord: {},
          });
        }}
        width={1100}
        centered
        className="dataModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.dataModal}
        footer={null}
      >
        <ValveData4
          editRecord={this.state.QQHAllData}
          name={this.state.QQHAllData.name}
          wrappedComponentRef={(inst) => this.dataForm = inst}
        />
      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.dataModal2} modalClass="dataModal2"
                                title={`${this.state.YYCAllData1.name} 数据`}/>}
        destroyOnClose
        onCancel={() => {
          this.setState({
            dataModal2: false,
            editRecord: {},
          });
        }}
        width={1100}
        centered
        className="dataModal2"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        visible={this.state.dataModal2}
        footer={null}
      >
        <ValveData14
          editRecord={this.state.YYCAllData1}
          name={this.state.YYCAllData1.name}
          wrappedComponentRef={(inst) => this.dataForm = inst}
        />
      </Modal>
    </div>;
  }
}

export default BasicList;
